<template>
	<view>
		<ItemList head>
			<template #title>
				<text class="form-name">OSG Feedback Form</text>
			</template>
			<template #topic>
			</template>
		</ItemList>
		<template>
			<ItemList>
				<template #title>
					Email
				</template>
				<template #topic>
					<view class="picker-btn">
						<picker @change="bindPickerChange" :value="index" :range="emailOption">
							<view class="uni-input">{{form.email ?form.email : 'Select your email'}}</view>
						</picker>
					</view>
					
				</template>
			</ItemList>
			<ItemList>
				<template #title>
					Please write your full name and school in the format of (FirstName LastName School GradYear)
					Example: John Doe NYU 2024
				</template>
				<template #topic>
					<u--input disabled
						:value="`${userDetail.real_name} ${userDetail.school?userDetail.school:''} ${userDetail.year?userDetail.year:''}`"
						border="bottom" clearable></u--input>
				</template>
			</ItemList>
			<ItemList>
				<template #title>
					You are ...?
				</template>
				<template #topic>
					<u--input disabled :value="`${userDetail.role_name}`" border="bottom" clearable></u--input>
				</template>
			</ItemList>
			<ItemList>
				<template #title>
					Who are your providing feedback on?
				</template>
				<template #topic>
					<view class="picker-btn">
						<picker @change="userListChange" :value="userListindex" :range="userList">
							<view class="uni-input">{{form.mot_id ?form.mot_id : 'select' }}</view>
						</picker>
					</view>
				</template>
			</ItemList>
			<ItemList>
				<template #title>
					How would you describe this person?
				</template>
				<template #topic>
					<u-radio-group v-model="form.describe_type.text" placement="column" @change="selectRadio">
						<u-radio :customStyle="{marginBottom: '17px'}" v-for="(item, index) in list" :key="index"
							:label="item.name" :name="item.name" :disabled="item.disabled">
						</u-radio>
					</u-radio-group>
				</template>
			</ItemList>
			<ItemList>
				<template #title>
					Please describe your experience with this person.
				</template>
				<template #topic>
					<u--input v-model="form.describe_info" border="bottom" placeholder="Your Answer"
						clearable></u--input>
				</template>
			</ItemList>
		</template>
	</view>
</template>

<script>
	import ItemList from '@/components/basicListItem/formCardItem/formCardItem.vue'
	export default {
		components: {
			ItemList
		},
		computed: {
			userDetail() {
				return this.$store.state.userDetail;
			},
			userList() {
				const arr =  this.$store.state.userList
				return arr.map(item => item.real_name);
			}
		},
		data() {
			return {
				index: 0,
				userListindex:0,
				emailOption: this.$store.state.userDetail.emails,
				userOption: [],
				form: {
					describe_info: '',
					email: '',
					mot_id: '',
					describe_type: ''
				},
				list: [{
						name: "AMAZING- EXCEEDS ALLEXPECTATIONS",
						disabled: false
					},
					{
						name: 'Great - overall no complaints',
						disabled: false
					},
					{
						name: 'Okey',
						disabled: false
					},
					{
						name: 'Not Great',
						disabled: false
					}
				],
			}
		},
		onLoad() {},

		methods: {
			bindPickerChange: function(e) {
				this.index = e.detail.value
				this.form.email = this.emailOption[e.detail.value]
				console.log('picker发送选择改变，携带值为', e.detail.value,this.form.email)
			},
			userListChange(e){
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.userListindex = e.detail.value
				this.form.mot_id = this.userList[e.detail.value]
			},
			//radio选择
			selectRadio(e){
				console.log(e);
			},
			getOption() {
				// this.emailOption = Object.entries(this.userDetail.emails).reduce((acc, [key, value]) => {
				// 	acc.push({
				// 		value: value,
				// 		text: value ? value : '---'
				// 	});
				// 	return acc;
				// }, []);
				// this.userOption = this.userList.map(item => item.real_name);
				// console.log(extracted); // ['John', 'Jane', 'Bob']
				// this.userOption = Object.entries(this.userList).reduce((acc, [key, value]) => {
				// 	acc.push({
				// 		value: this.userList[key],
				// 		text: value.real_name
				// 	});
				// 	return acc;
				// }, []);
			}
		}
	}
</script>

<style>
	page {
		background: #f3eafb;
	}

	.form-name {
		font-size: 70rpx;
		font-weight: 600;
	}

	.btn {
		width: 150rpx;
		float: left;
	}
	.picker-btn{
		border-bottom: 1px solid #000; 
		padding: 9px;
	}
</style>